<template>
  <el-card class="upload-card">
    <template #header>
      <div class="card-header">
        <h3>文档上传</h3>
      </div>
    </template>
    
    <el-form>
      <el-form-item>
        <el-input
          v-model="documentContent"
          type="textarea"
          :rows="6"
          placeholder="输入文档内容..."
        />
      </el-form-item>
      
      <el-form-item>
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :auto-upload="false"
          :on-change="handleFileChange"
        >
          <el-icon class="el-icon--upload"><Upload /></el-icon>
          <div class="el-upload__text">
            拖拽文件到此处或 <em>点击上传</em>
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="uploadDocument" :loading="uploading">
          处理文档
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Upload } from '@element-plus/icons-vue'
import request from '@/utils/request'

const documentContent = ref('')
const uploading = ref(false)

const handleFileChange = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    documentContent.value = e.target.result
  }
  reader.readAsText(file.raw)
}

const uploadDocument = async () => {
  if (!documentContent.value) {
    ElMessage.warning('请输入或上传文档内容')
    return
  }

  uploading.value = true
  try {
    await request.post('/api/upload', {
      content: documentContent.value,
      type: 'text'
    })
    ElMessage.success('文档处理成功')
    documentContent.value = ''
  } catch (error) {
    ElMessage.error('处理失败：' + error.message)
  } finally {
    uploading.value = false
  }
}
</script>

<style scoped>
.upload-card {
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.upload-demo {
  width: 100%;
}
</style> 